<template>
  <div class="cart">
    <ul>
      <li v-for="(item, index) in cartList" :key="index">
        <van-checkbox
          v-model="item.isCheck"
          checked-color="#ee0a24"
          @change="checkOne"
        ></van-checkbox>
        <van-card :thumb="item.url">
          <template #tags>
            <p>{{ item.name }}</p>
            <span style="color: red">￥{{ item.price }}</span>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </li>
    </ul>
    <van-submit-bar :price="allprice" button-text="提交订单">
      <van-checkbox v-model="checkAll" checked-color="#ee0a24" @click="checkBtn">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const data = reactive({
      cartList: computed(() => store.state.cartlist),
      checkAll: false,
      allprice: computed(() => {
        let price = 0;
        store.state.cartlist.forEach(item =>{
            if (item.isCheck){
              price+=item.num*item.price
            }
        })
        return price*100;
      })
    });
    const checkBtn = () => { // 全选
       data.cartList.forEach(item => {
          item.isCheck = data.checkAll
       })
    }
    const checkOne = () => { // 反选
       data.checkAll = data.cartList.every(item => item.isCheck);
    }
    return {
      ...toRefs(data),
      checkBtn,
      checkOne
    };
  },
};
</script>
<style lang="scss" scoped>
.cart {
  li {
    display: flex;
    .van-checkbox {
      width: 50px;
    }
  }
}
.van-stepper {
  float: right;
}
.van-submit-bar{
  bottom: 50px;
}
</style>